<template>
    <div style="height: 350px;" id="mailChartBox">
      <div class="select">
        <el-select v-model="value" placeholder="2019">
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </div>
      <div id="mailChart" style="height: 300px"></div>
    </div>
</template>

<script>
  import {mailCount} from "@/api/customer";
  import {getSum} from '@/util/util';
  export default {
        name: "mail",
        props:['id'],
        data() {
            return {
                options:[2018,2019,2020],
                value:2020,
                mailData:[]
            }
        },
        methods:{
            init() {
                let date = new Date()
                this.value = date.getFullYear()
                this.$nextTick(() => {
                    let width = document.getElementsByClassName('tab')[0].offsetWidth -100
                    document.getElementById('mailChart').style.width = width + 'px'
                    mailCount(this.id, this.value).then(res => {
                        this.mailData = res.data.data;
                        let sendCount = [];
                        let openedCount = [];
                        let month = [];

                        this.mailData.forEach(value => {
                            sendCount.push(value.sendCount);
                            openedCount.push(value.openedCount);
                            month.push(value.month + '月');
                        })
                        let send = sendCount.reduce(getSum);
                        let open = openedCount.reduce(getSum);
                        this. drawLine(send,open, sendCount, openedCount, month)
                    })
                })
            },
            drawLine(send,open, sendCount, openedCount, month) {
                let arr = [
                    {
                        name: '发送封数',
                        type: 'line',
                        stack: '总量',
                        smooth:true,
                        symbol:'none',
                        data: sendCount
                    },
                    {
                        name: '打开封数',
                        type: 'line',
                        smooth:true,
                        symbol:'none',
                        data: openedCount
                    }
                ];


                // 基于准备好的dom，初始化echarts实例

                let myChart = this.$echarts.init(document.getElementById('mailChart'))
                // 绘制图表
                let options = {
                    title: {
                        text: '邮件',
                        subtext: `近12个月，打开封数 ${open}封，向客户发信 ${send}封`
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['发送封数', '打开封数']
                    },
                    grid: {
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: month
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series:arr
                };
                myChart.setOption(options)

            }
        },
      watch:{
          value() {
              this.init()
          }
      }
    }
</script>

<style scoped>
.select{
  text-align: right;
}
</style>
